<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
  const box = document.querySelector(".box");

  move(box, {
    left: 400,
    top: 10
  });

  function move(ele, data, cb){
    clearInterval(ele.t);
    ele.t = setInterval(()=>{
      let flag = true;
      for(let i in data){
        const now = parseInt(getStyle(ele, i));

        let speed = (data[i] - now) / 10;
        speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);

        ele.style[i] = now + speed + "px";

        if(now !== data[i]) flag = false;
      }
      if(flag){
        clearInterval(ele.t);
        // 动画结束后，要执行的功能
        cb && cb();
      }
    }, 30);
    
    function getStyle(ele, attr){
      return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
    }
  }

  
</script>
</html>